﻿@theme: "../refs/";

@import "@{theme}variables.less";
@import "@{theme}mixins.less";

// module for product attribute displayed in product detail page.
.product-attributes {
    border: 1px dashed #BABABA;
    margin: 5px 0;

    .required {
        color: red;
    }

    .product-attributes-item {
        overflow: hidden;
        clear: both;
        padding-top: 5px;
    }

    .product-attributes-title {
        width: 80px;
        line-height: 25px;
        float: left;
        text-align: right;
        padding-right: 10px;
    }

    .product-attributes-value {
        float: left;
        width: 580px;
    }

    .option-list {
        list-style: none;
        margin: 0;
        padding: 0;
        .clearfix();

        li {
            margin: 2px 8px 2px 0;
            float: left;
            position: relative;
            background-color: #fff;
            line-height: 20px;
            vertical-align: middle;
            cursor: pointer;

            .option-list-item {
                display: block;
                background: none;
                min-width: 10px;
                text-align: center;
                white-space: nowrap;
                width: auto;
                padding: 0 6px;
                text-decoration: none;
                color: #666;
                border: 2px solid #DBDBDB;
                font-size: @font-size-base;
            }

            span.pa_000001 {
                /*background: #000 url(i/single/multicolor.png) no-repeat !important;*/
                background: #000 url(../images/icon-sprites.png) no-repeat 0 -87px !important;
            }

            span.pa_000002 {
                /*background: #000 url(i/single/white-black.png) no-repeat !important;*/
                background: #000 url(../images/icon-sprites.png) no-repeat 0 -54px !important;
            }

            span.pa_000003 {
                /*background: #000 url(i/single/white-othercolor.png) no-repeat !important;*/
                background: #000 url(../images/icon-sprites.png) no-repeat 0 -160px !important;
            }

            span.pa_000004 {
                /*black-othercolor*/
                background: #000 url(../images/icon-sprites.png) no-repeat 0 -124px !important;
            }

            &.selected, &:hover {
                .option-list-item {
                    border-color: @brand-primary;
                    color: @brand-primary;
                    .box-shadow(1px 1px 3px 0 rgba(0,0,0,.6));
                }
            }

            &.selected {
                i {
                    display: block;
                    position: absolute;
                    bottom: 0;
                    right: 0;
                    width: 12px;
                    height: 12px;
                    overflow: hidden;
                    background: url(../images/selected-icon.gif) no-repeat 0 0;
                    text-indent: -99em;
                }
            }
        }

        &.check-box-list {
            li {
                padding: 0 5px;
                background: #E2E2E2;
            }
        }
    }
}
